<!--
 * 用户管理--导入
 * @author: hexiaozhen
 * @since: 2023-09-27
 * import.vue
-->
<template>
  <a-modal
    v-model:visible="visibleModal"
    title="用户导入"
    title-align="start"
    @ok="handleOk"
    :mask-closable="false"
    draggable
    @cancel="handleCancel"
  >
    <a-upload draggable :auto-upload="false" :customRequest="customRequest" ref="uploadRef" @change="onChange" />
    <a-checkbox class="margin-t-1" v-model:value="checkbox">是否更新已经存在的用户数据</a-checkbox>
    <a-button class="margin-l-2" type="primary" @click="importTemplateFn">下载模板</a-button>
    <p class="tip margin-t-1">提示：仅允许导入“xls”或“xlsx”格式文件！</p>
  </a-modal>
</template>

<script setup>
import { ref, toRefs, getCurrentInstance } from 'vue'
import system from '@/api/modules/system'
const props = defineProps({
  // 表单json配置项
  visible: { type: Boolean, default: false },
})
const { proxy } = getCurrentInstance()
const { visible } = toRefs(props)
const emit = defineEmits(['update:visible', 'submit'])
let visibleModal = ref(false) // 弹窗显示与隐藏
visibleModal.value = visible.value
const checkbox = ref(false)
// 下载模板
const importTemplateFn = () => {
  system.importTemplate().then((res) => {
    proxy.$commontFn.exportFile(res, '用户管理导入数据模板')
  })
}
const uploadRef = ref()
const files = ref([])
const onChange = (fileList) => {
  files.value = fileList
}
// 自定义上传文件
const customRequest = (option) => {
  const { onError, onSuccess, fileItem } = option
  const formData = new FormData()
  formData.append('file', fileItem.file)
  system
    .importData(formData)
    .then((res) => {
      visibleModal.value = false
      onSuccess(res)
      emit('update:visible', false)
      emit('submit')
    })
    .catch((err) => {
      onError(err)
    })
}

// 确定
const handleOk = (e) => {
  e.stopPropagation()
  uploadRef.value.submit()
}
// 取消
const handleCancel = () => {
  visibleModal.value = false
  emit('update:visible', false)
}
</script>

<style scoped lang="less">
.tip {
  color: @danger-6;
}
a {
  text-decoration-line: revert;
}
</style>
